/*
* @AddressBook.vue
* @description 通讯录管理页面
* @author huangchuanshan
* @update (chenzhihui 2020/3/28)
*/
<template>
    <div class="mt14">
        <SearchComp ref='SearchComp'></SearchComp>
        <div class='txl-body'>
            <div class="txl-left">
                <!--树形图-->
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>组织机构</span>
                    </div>
                    <el-tree
                            accordion
                            class="text-item choseTreetxl"
                            node-key="dwnm"
                            :data="treeData"
                            :props="defaultProps"
                            :highlight-current='isChecked'
                            @node-click="handleNodeClick"
                    ></el-tree>
                </el-card>
            </div>
            <div class="txl-right">
                <!--交互按钮组-->
                <div class="flex">
                    <el-button type="primary" class="buttonstyle" @click="addPerson">新增</el-button>
                    <el-button type="primary" class="buttonstyle" @click="deleteMul()">删除</el-button>
                    <el-button type="primary" class="buttonstyle" @click="exportExcel()">导出</el-button>
                </div>
                <!--表格主体-->
                <div class="table-body">
                    <el-table
                            ref="multipleTable"
                            :data="tableData"
                            @selection-change="handleSelectionChange"
                            style="width: 100%;height: 100%">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column v-for="item in tableHead" :key="item.prop"
                                         :prop="item.prop"
                                         :label="item.label"
                                         :width="item.width">
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="editePerson(scope.row)"><img
                                        src="../../static/image/编辑_on.png" alt=""></el-button>
                                <el-button type="text" size="small" @click="deleteSingle(scope.row)"><img
                                        src="../../static/image/删除_on.png" alt=""></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--表格分页-->
                    <div class="block">
                        <el-pagination
                                @current-change="handleCurrentChange"
                                :current-page="page.pageNum"
                                :page-size="page.limit"
                                layout="total, prev, pager, next, jumper"
                                :total="page.total">
                        </el-pagination>
                    </div>
                </div>
                <!--交互弹窗-->
                <div class="bjxzdialog">
                  <AddressBookDialog ref = 'AddressBookDialog'
                                     :showAddressBook = 'showAddressBook'
                                     :editFlag = 'editFlag'
                                     :formData = 'formData'
                                     :unUseFlag = 'unUseFlag'
                                     :zzjgzd = 'zzjgzd'
                                     :listData = 'listData'>
                  </AddressBookDialog>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {baseServe} from "../../request/api"
    import SearchComp from "../searchComp/SearchComp";
    import AddressBookDialog from "./AddressBookDialog";
    export default {
        name: "AddressBook",
        data() {
            return {
                //表格头参数
                tableHead: [
                    {label: '姓名', prop: 'name', width: ''},
                    {label: '部门', prop: 'department', width: '180'},
                    {label: '岗位', prop: 'position', width: ''},
                    {label: '固定电话', prop: 'fixedLineNum', width: ''},
                    {label: '性别', prop: 'sex', width: ''},
                    {label: '名族', prop: 'nationality', width: ''},
                    {label: '联系方式', prop: 'phoneNum', width: ''},
                    {label: '出生年月', prop: 'birth', width: ''},
                    {label: '籍贯', prop: 'nativePlace', width: ''},
                    {label: '身份证', prop: 'cardNum', width: ''},
                ],
                //弹窗表单下拉列表数据
                listData:null,
                //开启树形图选中高亮
                isChecked: true,
                //组织机构树形图数据
                treeData: [],
                //表格数据
                tableData: [],
                //显示人员增加、编辑弹窗
                showAddressBook:false,
                //批量删除、表格多选数据
                selectRowArr: [],
                //树形图显示内容参数
                defaultProps: {
                    children: 'subOrgStructDataList',
                    label: 'dwmc'
                },
                //表单数据
                formData: {
                    name:'',
                    departmentId:'',
                    position:'',
                    fixedLineNum:'',
                    phoneNum:'',
                    cardNum:'',
                    nationality:'',
                    sex:'',
                    address:'',
                    nativePlace:'',
                    birth:'',
                },
                formLabelWidth: '120px',
                //分页数据
                page: {
                    //总条数
                    total: 30,
                    //每页条数
                    limit: 5,
                    //当前页数
                    pageNum: 1,
                    //实际返回的条数
                    dataLength: 7
                },
                //点击选中的组织架构数据
                clickStructData: {},
                //组织机构数据
                zzjgzd: [],
                //是否开启表单部门选择下拉框
                unUseFlag: true,
                //编辑、新增人员标记
                editFlag: false,
            }
        },
        components: {
            SearchComp,
            AddressBookDialog
        },
        mounted() {
            this.initDialog()
            this.getStructData();
            this.searchAddressBook(this.$refs.SearchComp.searchForm)
        },
        watch: {
            //监听搜索参数变化，触发搜索方法，更新数据
            '$store.state.searchParam': function (nVal, oVal) {
                    this.searchAddressBook(nVal)
            },
            //监听clickStructData变化，触发表格数据更新
            clickStructData: {
                handler: function () {
                    this.searchAddressBook(this.$refs.SearchComp.searchForm)
                },
                deep: true
            },
        },
        methods: {
            /**************************************************************获取数据************************************************************************/
            /**
             * 初始化弹窗需要数据
             */
            initDialog(){
                this.listData = this.$refs.SearchComp.dictData[0]
            },
            /**
             * 查詢通訊錄方法
             * @param param 接口参数
             */
            searchAddressBook(param) {
                if(!param){
                    param = {
                        pageNum: 1,
                        pageSize: 5,
                        userRelatedQueryCondition: {

                        }
                    }
                }
                if (this.clickStructData.zzjgid) {
                    param.userRelatedQueryCondition.departmentId = this.clickStructData.zzjgid
                }
                this.$AxiosApi.searchryxx(param,'yqUrl').then(res => {
                    let obj = res.data.data.list
                    obj.map(i => {
                        if (i.sex == 'male') {
                            i.sex = '男'
                        }
                        if (i.sex == 'female') {
                            i.sex = '女'
                        }
                    })
                    this.tableData = obj
                    this.page.total = res.data.data.total
                    this.page.pageNum = res.data.data.pageNum
                })
            },
            /**
             * 分页方法
             * @param page 分页参数
             */
            handleCurrentChange(page) {
                let param = {
                    pageNum: page,
                    pageSize: 5,
                    userRelatedQueryCondition: {
                        departmentId: this.clickStructData.zzjgid
                    }
                }
                this.searchAddressBook(param);
            },
            /**
             * 获取组织架构数据(左侧树形图)方法
             */
            getStructData() {
                let param = {orgStructId: 0}
                let that= this;
                this.$AxiosApi.getzzjg(param,'yqUrl').then(res => {
                    res = res.data.data;
                    that.treeData = res
                    that.handleTreeData(res,that.zzjgzd);
                })
            },
            /**
             * 格式化树形图数据方法,将具有层级结构的数据提取出来进行缓存
             * @param data 需要格式化的数据
             * @param arr 处理后数据返回
             */
            handleTreeData(data,arr){
                let that = this
                data.map(res => {
                    arr.push({label: res.dwmc, value: res.zzjgid})
                    if (res.subOrgStructDataList != {}) {
                        that.handleTreeData(res.subOrgStructDataList,arr)
                    }else{
                        return;
                    }
                })
            },
            /**
             * 树形图点击方法，更新clickStructData，从而更新表格数据
             * @param data 需要格式化的数据
             */
            handleNodeClick(data) {
                this.clickStructData = data
            },
            /**************************************************************删除数据************************************************************************/
            /**
             * 表格数据多选
             */
            handleSelectionChange(val) {
                this.selectRowArr = [];
                val.forEach(item => {
                    this.selectRowArr.push(item.userId);
                });
            },
            /**
             * 删除方法
             * @param idList 需要删除的数据id列表
             */
            deleteFunc(idList) {
                let that = this
                this.$AxiosApi.deletexgry(idList,'yqUrl').then(res => {
                        if (res.data.success == true) {
                            that.searchAddressBook()
                            that.$message({
                                message: '删除成功',
                                type: "success"
                            })
                        }
                    })
            },
            /**
             * 删除单条数据
             * @param id 需要删除的数据id
             */
            deleteSingle(id) {
                let that = this;
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    that.deleteFunc([id.userId])
                })
            },
            /**
             * 删除多条数据
             */
            deleteMul() {
                let that = this;
                if (this.selectRowArr.length != 0) {
                    this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        that.deleteFunc(that.selectRowArr)
                    })
                } else {
                    this.$message({
                        message: "请选择删除项",
                        type: 'warning'
                    })
                }

            },
            /**************************************************************新增、編輯数据（未完成）************************************************************************/
            /**
             * 新增按钮方法
             */
            addPerson() {
                //没有选择组织机构时，就设置部门下拉不可用
                if (this.clickStructData.dwmc === undefined) {
                    this.unUseFlag = false
                } else {
                    this.unUseFlag = true
                }
                if (this.clickStructData.dwmc) {
                    this.formData.department = this.clickStructData.dwmc
                    this.formData.departmentId = this.clickStructData.zzjgid
                }
                this.editFlag = false
                this.showAddressBook = true
            },
            /**
             * 编辑按钮方法
             */
            editePerson(item) {
                this.unUseFlag = true
                this.showAddressBook = true
                this.formData = item
                this.editFlag = true
            },
            /*************************************************************表格数据导出（这个功能搞不懂，暂时不重构）************************************************/
            /**
             * 数据导出按钮方法
             */
            exportExcel() {
                let param = {}
                param = this.$refs.SearchComp.searchForm.userRelatedQueryCondition
                param.departmentId = this.clickStructData.zzjgid
                this.$AxiosApi.exportExcel(param, {responseType: "blob"})
                    .then(res => {
                        if (res.status === '200') {
                            const blob = new Blob([res.data]);
                            const fileName = "yqzd.xls";
                            const elink = document.createElement("a");
                            elink.download = fileName;
                            elink.style.display = "none";
                            elink.href = URL.createObjectURL(blob);
                            document.body.appendChild(elink);
                            elink.click();
                            URL.revokeObjectURL(elink.href); // 释放URL 对象
                            document.body.removeChild(elink);
                        }
                    })
            },
        }
    }
</script>

<style lang="less" scoped>
    .mt14 {
        width: 100%;
        height: 100%;

        .txl-body {
            width: 100%;
            height: 100%;
            position: relative;
            left: 0px;
            top: 0px;
        }

        .txl-left {
            margin-left: 8px;
            width: 200px;
            position: absolute;
            top: 10px;
            height: 100%;

            .box-card {
                height: 100%;
                width: 190px;
                border: 1px #999999 solid;

                .clearfix {
                    font-size: 16px;
                    color: #999999;
                }

                .el-tree-node__content {
                    font-size: 14px;
                    vertical-align: middle;
                    margin: 5px;
                }

                .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
                    background-color: rgba(0, 0, 0, 0.1);
                    border-radius: 5px;
                    color: #0081dc !important;
                }

                .el-card__body {
                    padding: 0;
                }

                .text-item {
                    font-size: 16px;
                    text-align: center;
                    height: 30px;
                    padding-top: 4px;

                    .el-tree-node__content {
                        display: block;
                        text-align: center;
                        height: 30px;
                        align-items: center;
                    }

                    .el-tree-node__expand-icon.is-leaf {
                        display: none;
                    }
                }
            }

            .leftname {
                color: #999999;
                font-weight: 200;
                font-size: 16px;
                margin-top: 20px;

                .tab-title {
                    margin: 20px;
                }
            }

        }

        .txl-right {
            position: absolute;
            width: 1420px;
            height: 100%;
            left: 225px;
            top: 0px;
            .table-body{
                width: 100%;
                height: 90%;
            }
            .block {
                .el-pagination__total {
                    color: black;
                }

                .el-pagination button:disabled, .el-pager, .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
                    color: black !important;
                }

                .el-pager {
                    color: black;
                }
            }

            .buttonstyle {
                margin-left: 20px;
                width: 120px;
                height: 40px;
                margin-top: 15px;
                margin-bottom: 15px;
            }
            .el-table{
                color:black;
            }
            .el-table__body-wrapper {
                height: 540px;
                overflow-y: auto;
            }

            .el-table__header-wrapper {
                margin-left: 0px;
                margin-top: 0px;
            }

            .has-gutter {
                background-color: rgba(0, 0, 0, 0.2);
                color: #000000;
            }

            .el-table__body tr:hover > td {
                background-color: rgba(0, 0, 0, 0.1);
            }

            .el-table__body tr {
                color: #1a303a;
            }

            .el-form-item {
                width: 400px;
            }

            .el-form--inline {
                padding: 0px;

            }

            .el-form-item {
                margin-left: 40px;
                margin-bottom: 0px;
            }

            .el-select {
                width: -webkit-fill-available;
            }
        }

        .bjxzdialog {
            .el-dialog__headerbtn {
                display: none;
            }

            .el-dialog {
                height: 700px;
                width: 1000px;
                border-radius: 6px;

                .el-dialog__header {
                    height: 40px;
                    padding: 0;

                    .el-dialog__title {
                        top: 10px;
                        font-size: 16px;
                        position: absolute;
                        margin-left: 22px;
                    }
                }

                .el-button {
                    border-radius: 4px;
                    height: 30px;
                    width: 120px;
                    align-items: center;
                    line-height: 3px;
                    margin-left: 50px;
                }

                .el-button--default {
                    border: 1px #0081dc solid;
                    color: #0081dc;
                }

                .el-input__inner {
                    height: 36px;
                    width: 440px;
                }

                .el-form-item {
                    width: 440px;
                    margin-left: 30px;
                }

                .el-select-dropdown__list {
                    width: 440px;
                }

                .el-form-item__error {
                    margin-left: 180px;
                }

                .el-form {
                    padding-top: 20px;
                }

                .el-form-item__label {
                    line-height: 24px;
                    font-size: 14px;
                }
            }

            .el-dialog__body {
                background: #f0f0f0;
                width: 980px;
                margin-left: 10px;
                height: 500px;
                padding: 0;
            }

            .el-dialog__footer {
                background: #f0f0f0;
                width: 980px;
                margin-left: 10px;
                padding-top: 100px;
                padding-bottom: 20px;
            }
        }

    }
</style>
